<!--
 * @Author: Wangtao
 * @Date: 2020-09-28 10:50:52
 * @LastEditors: Wangtao
 * @LastEditTime: 2021-04-14 10:47:32
-->
<template>
  <div class="card-list">
    <div
      :class="{ 'card-item': true, active: currentId === item.id }"
      v-for="(item, index) in cardList"
      :key="item.id + index"
      @click="handleClickItem(item, index)"
    >
      <div class="delete-card" @click.stop="cardDelete(item)">x</div>
      <div class="card-left">
        <div class="icon-box" :class="item.event">
          <i :class="['V7_iconfont', getCardType(item.event)]"></i>
        </div>
      </div>
      <div class="card-right">
        <div class="first-line">
          <span class="customer-name">{{ item.custName }}</span>
          <span class="call-time">{{ item.eventTime | timestampFormat }}</span>
        </div>
        <div class="second-line">
          <span class="phone-number">{{
            item.body && item.body.hideTel ? item.body.hideTel : item.phoneNum | handleNum(item.body.extras)
          }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import { Base64 } from 'js-base64'

const zeroize = (num) => {
  return (String(num).length === 1 ? '0' : '') + num
}
@Component({
  name: 'CallCard',
  filters: {
    handleNum (val: any, extra: any) {
      if (extra) {
        const extrasObj = JSON.parse(Base64.decode(extra))
        if (extrasObj && Object.keys(extrasObj).includes('extraNumber')) {
          return val + '-' + extrasObj.extraNumber
        }
      }
      return val
    },
    timestampFormat (timestamp) {
      const callTimstamp = new Date(timestamp).getTime() / 1000
      const tamp: any = new Date().getTime() / 1000
      const curTimestamp = parseInt(tamp, 10) // 当前时间戳
      const timestampDiff = curTimestamp - callTimstamp // 参数时间戳与当前时间戳相差秒数

      const curDate = new Date(curTimestamp * 1000) // 当前时间日期对象
      const tmDate = new Date(callTimstamp * 1000) // 参数时间戳转换成的日期对象

      const Y = tmDate.getFullYear()
      const m = tmDate.getMonth() + 1
      const d = tmDate.getDate()
      const H = tmDate.getHours()
      const i = tmDate.getMinutes()
      if (timestampDiff < 60) { // 一分钟以内
        return '刚刚'
      } else if (timestampDiff < 3600) { // 一小时前之内
        return Math.floor(timestampDiff / 60) + '分钟前'
      } else if (curDate.getFullYear() === Y && curDate.getMonth() + 1 === m && curDate.getDate() === d) {
        return '今天' + zeroize(H) + ':' + zeroize(i)
      } else {
        const newDate = new Date((curTimestamp - 86400) * 1000); // 参数中的时间戳加一天转换成的日期对象
        if (newDate.getFullYear() === Y && newDate.getMonth() + 1 === m && newDate.getDate() === d) {
          return '昨天' + zeroize(H) + ':' + zeroize(i)
        } else if (curDate.getFullYear() === Y) {
          return zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i)
        } else {
          return Y + '年' + zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i)
        }
      }
    }
  }
})

export default class CallCard extends Vue {
  @Prop() private cardList!: []
  @Prop() private activeName!: ''
  @Prop() private type!: ''
  private $bus: any
  private $router: any
  private $route: any

  private currentId = ''
  private currentPhoneNum = ''

  private mounted () {
    this.handleRouteParams()
  }

  private handleClickItem (item: any, index: any) {
    this.$router.push({ path: `/call_workBench/index/${this.activeName}/${item.id}?phone=${item.phoneNum}` })
  }

  private handleRouteParams () {
    const currentRouteParams = this.$router.currentRoute.params
    const currentRouteQuery = this.$router.currentRoute.query
    if (this.$route.name === 'callCard') {
      if (currentRouteQuery && currentRouteQuery.phone) {
        this.currentPhoneNum = currentRouteQuery.phone
        if (this.$route.params.id !== this.currentId) {
          setTimeout(() => {
            this.$bus.$emit('initCustomerCard', {
              callSheetId: this.currentId,
              phone: this.currentPhoneNum
            })
          }, 0)
        }
      }
      if (currentRouteParams && currentRouteParams.id) {
        this.currentId = currentRouteParams.id
      }
    }
  }

  private getCardType (type: any) {
    let typeIcon = ''
    switch (type) {
      case 'link':
        typeIcon = 'V7_iconV7tubiao_tonghua'
        break;
      case 'ring':
        typeIcon = 'V7_iconV7tubiao_zhenling'
        break;
      case 'Answered':
        typeIcon = 'V7_iconV7tubiao_yijieting'
        break;
      case 'noAnswered':
        typeIcon = 'V7_iconV7tubiao_weijietong'
        break;
      case 'calling':
        typeIcon = 'V7_iconV7tubiao_tonghua'
        break;
      default:
        typeIcon = 'V7_iconV7tubiao_tonghua'
        break;
    }
    return typeIcon
  }

  private cardDelete (item) {
    this.$emit('deleteCard', item)
  }

  @Watch('activeName')
  private activeNameChange () {
    this.currentId = ''
  }

  @Watch('$route')
  private routeChange () {
    this.handleRouteParams()
  }
}
</script>

<style lang="stylus" scoped>
$ring = $c-warn
$link = $c-green
$calling = $c-main
$Answered = $c-green
$noAnswered = $c-danger
@keyframes ring
  0%
    transform rotate(0)
  100%
    transform rotate(30deg)
@keyframes link
  0%
    transform rotate(0)
  100%
    transform rotate(360deg)
.card-list
  .card-item
    height 72px
    width 100%
    border-radius 6px
    display flex
    align-items center
    cursor pointer
    padding 0 12px 0
    box-sizing border-box
    position relative
    overflow hidden
    .delete-card
      position absolute
      right 0
      top 0
      width 17px
      height 17px
      border-radius 0 0 0px 17px
      color white
      background #FC6B5C
      text-align center
      line-height 12px
      padding-left 3px
      display none
    .card-left
      height 100%
      margin-top 34px
      align-items center
      padding-right 12px
      .icon-box
        width 26px
        height 26px
        border-radius 50%
        text-align center
        line-height 26px
        background #FC6B5C
        color white
        display flex
        justify-content center
        align-items center
        i
          font-size 12px
      .ring
        background $ring
        animation ring 1s linear infinite
      .Answered
        background $Answered
      .noAnswered
        background $noAnswered
      .calling
        background $calling
        animation ring 1s linear infinite
      .link
        background $link
        animation link 5s linear infinite
    .card-right
      height 100%
      display flex
      flex-direction column
      justify-content center
      width 100%
      .first-line
        display flex
        justify-content space-between
        margin-bottom 5px
      .second-line
        margin-top 5px
    .call-time, .phone-number
      font-size 12px
    .call-time
      color #B3B9C7
    .phone-number
      display inline-block
      color $fc-gray3
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
      max-width 19em
      vertical-align middle
    .customer-name
      color #303753
      font-size 14px
      font-weight 600
  .active
    background $c-main
    color white
    .delete-card
      display block
    .call-time
      color white
    .phone-number
      color white
    .customer-name
      color white
    .card-left
      .icon-box
        background white
      .ring
        color $ring
      .Answered
        color $Answered
      .noAnswered
        color $noAnswered
      .calling
        color $calling
      .link
        color $link
  .card-item:hover
    background #F3F6F9
    .delete-card
      display block
  .active:hover
    background #008BEE
</style>
